.materialExplorer {
  width: 640px; padding: 20px 20px 0px 20px; max-height: 500px; overflow-y: scroll; display: block !important
}
.materialExplorer div.top {
  width: 100%; border-bottom: #dddddd 1px solid; display: flex; align-items: stretch
}
.materialExplorer div.top div.tab {
  width: 60%
}
.materialExplorer div.top div.bar {
  flex: 1
}
.materialExplorer div.top div.bar div.box {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px
}
.materialExplorer div.top div.bar div.box span.search {
  display: block
}
.materialExplorer div.top div.bar div.box span.search input.keyword {
  width: 100px
}
.materialExplorer div.top div.bar div.box span.order {
  display: block; width: 80px; height: 30px; position: relative; cursor: default
}
.materialExplorer div.top div.bar div.box span.order dl {
  width: 100%; margin: 0px; padding: 0px; box-sizing: border-box; max-height: 30px; background: #ffffff; border: #d1d1d1 1px solid; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 100; transition: all 0.3s ease
}
.materialExplorer div.top div.bar div.box span.order dl dt {
  width: 100%; height: 28px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0px 10px
}
.materialExplorer div.top div.bar div.box span.order dl dt em {
  display: block; font-style: normal; color: #666666
}
.materialExplorer div.top div.bar div.box span.order dl dt jtbc-svg {
  display: block; width: 18px; height: 18px; --fore-color: #666666
}
.materialExplorer div.top div.bar div.box span.order dl dd {
  margin: 0px; padding: 0px; padding-left: 10px; line-height: 24px; color: #666666; text-align: left; cursor: pointer; transition: all 0.3s ease
}
.materialExplorer div.top div.bar div.box span.order dl dd:hover {
  background-color: #0f6974; color: #ffffff
}
.materialExplorer div.top div.bar div.box span.order:hover dl {
  max-height: 100px
}
.materialExplorer div.list {
  width: 100%; display: none
}
.materialExplorer div.list.on {
  display: block
}
.materialExplorer div.list .filelist {
  padding: 20px 0px 10px 0px
}
.materialExplorer div.list .filelist item {
  width: 100%; display: flex; align-items: stretch; justify-content: center; padding: 10px; box-sizing: border-box; border: #dddddd 1px dashed; border-radius: 5px; margin-bottom: 10px; cursor: pointer
}
.materialExplorer div.list .filelist item span.title {
  display: block; flex: 1
}
.materialExplorer div.list .filelist item span.filegroup {
  margin-right: 10px
}
.materialExplorer div.list .filelist item span.filesize {
  display: block; width: 100px; padding: 4px; text-align: right; color: #666666
}
.materialExplorer div.list .filelist item.on {
  border: #0f6974 1px solid; background: rgba(15, 105, 116, 0.05); box-shadow: 0px 2px 2px rgb(0 0 0 / 5%)
}
.materialExplorer div.listEmpty {
  display: none; padding: 50px 0px; text-align: center; color: #999999
}
.materialExplorer div.listEmpty.on {
  display: block
}
.materialExplorer div.pagination {
  padding-bottom: 20px; text-align: center
}